// 运费模板
import {
  Form,
  Input,
  Button,
  Tooltip,
  Space,
  Table,
  Modal,
  message,
  Col,
} from 'antd';
import {
  SearchOutlined,
  DeleteOutlined,
  PlusOutlined,
  AppstoreOutlined,
  SyncOutlined,
  EditOutlined,
  ExclamationCircleOutlined,
} from '@ant-design/icons';
import './index.less';
import { TransPortModelState, useDispatch, useSelector } from 'umi';
import { Key, useEffect, useState } from 'react';
export default function ShopTransport() {
  const dispatch = useDispatch();
  const [form] = Form.useForm();
  const [select, setSelect] = useState<string[]>([]);
  const [isShow, setIsShow] = useState(true);
  const { confirm } = Modal;
  const [page, setPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);

  const columns: any[] = [
    {
      key: 'transName',
      title: '模板名称',
      dataIndex: 'transName',
      width: 600,
      align: 'center',
    },
    {
      key: 'action',
      title: '操作',
      width: 200,
      dataIndex: 'action',
      align: 'center',
      render: (text: any, record: any, index: any) => (
        <Space size="middle">
          <Button type="primary" icon={<EditOutlined />}>
            修改
          </Button>
          <Button
            type="primary"
            danger
            icon={<DeleteOutlined />}
            onClick={() => {
              confirm({
                title: '确定进行删除操作?',
                icon: <ExclamationCircleOutlined />,
                content: '删除之后无法恢复',
                onOk() {
                  console.log(record);
                  let newArr = [];
                  newArr.push(record.transportId);
                  dispatch({
                    type: 'shopTransport/transportDelete',
                    payload: newArr,
                  });
                  message.success('删除成功');
                },
                onCancel() {
                  console.log('Cancel');
                  message.error('删除失败');
                },
              });
            }}
          >
            删除
          </Button>
        </Space>
      ),
    },
  ];

  useEffect(() => {
    dispatch({
      type: 'shopTransport/getTransport',
    });
  }, []);
  // 重新发起页面请求
  const onChangePage = (page: number) => {
    setPage(page);
    dispatch({
      type: 'shopTransport/getTransport',
      payload: page,
    });
  };
  const { TransPortList, TransPortListLength } = useSelector(
    (state: { shopTransport: TransPortModelState }) => state.shopTransport,
  );
  console.log('TransPortList.....', TransPortList);
  const onChangeLenth = (ids: Key[]) => {
    console.log('111', ids);

    setSelect(ids as string[]);
  };
  const onShow = () => {
    setIsShow(!isShow);
  };
  const onFinish = (values: any) => {
    console.log(values,"222222222222222");
    dispatch({
      type: 'shopTransport/transportSearch',
      payload: values,
    });
    
  };
  const onReset = ()=>{
    form.resetFields();
    dispatch({
      type: 'shopTransport/getTransport',
    });
    window.location.reload()
  }
  return (
    <div className="shop-transport">
      {isShow ? (
        <Form layout="inline" form={form} onFinish={onFinish}>
        
            <Form.Item name={`transName`} label="模板名称">
              <Input placeholder="模板名称" />
            </Form.Item>
        
          <Form.Item>
            <Button type="primary" icon={<SearchOutlined />} htmlType="submit">
              搜索
            </Button>
          </Form.Item>
          <Form.Item>
            <Button icon={<DeleteOutlined />} onClick = {onReset}>清空</Button>
          </Form.Item>
        </Form>
      ) : null}

      <div className="avue-crud__menu">
        <div className="crud-menu__left">
          <Form layout="inline">
            <Form.Item>
              <Button type="primary" icon={<PlusOutlined />}>
                新建
              </Button>
            </Form.Item>
            <Form.Item>
              <Button
                type="primary"
                danger
                disabled={select.length ? false : true}
              >
                删除
              </Button>
            </Form.Item>
          </Form>
        </div>
        <div className="crud-menu__right">
          <Tooltip title="刷新">
            <Button
              shape="circle"
              icon={<SyncOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="显隐">
            <Button
              shape="circle"
              icon={<AppstoreOutlined style={{ fontSize: '12px' }} />}
              size="large"
            />
          </Tooltip>
          <Tooltip title="搜索">
            <Button
              shape="circle"
              icon={<SearchOutlined style={{ fontSize: '12px' }} />}
              size="large"
              onClick={onShow}
            />
          </Tooltip>
        </div>
      </div>
      <div className="transport">
        <div className="claen">
          {' '}
          <div>当前表格已选择 {select.length} 项</div>&nbsp;<a>清空</a>
        </div>
        <Table
          bordered={true}
          columns={columns}
          dataSource={TransPortList}
          rowSelection={{ type: 'checkbox', onChange: onChangeLenth }}
          pagination={{
            showQuickJumper: true,
            showSizeChanger: true,
            pageSizeOptions: ['10', '20', '30', '40', '50', '100'],
            pageSize: pageSize,
            onChange: onChangePage,
            showTotal: (total) => `共 ${total} 条`,
            total: TransPortListLength,
          }}
        />
      </div>
    </div>
  );
}
